<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=780,user-scalable=no"/>

	<title>SF Dok - 360° Langstrasse Zürich</title>




	<link rel="stylesheet" href="/css/sf-langstrasse.css">


	<script src="/js/jquery-1.7.1.min.js"></script>
	<script src="/js/modernizr-2.0.6.min.js"></script>

	
	<style>
						#wein:hover > .content, #wein.active > .content {
			width: 250px;
			height: 250px;
		}
								#bier:hover > .content, #bier.active > .content {
			width: 340px;
			height: 340px;
		}
								#kita:hover > .content, #kita.active > .content {
			width: 270px;
			height: 270px;
		}
								#fabr:hover > .content, #fabr.active > .content {
			width: 310px;
			height: 310px;
		}
								#hohl:hover > .content, #hohl.active > .content {
			width: 360px;
			height: 360px;
		}
								#zapo:hover > .content, #zapo.active > .content {
			width: 320px;
			height: 320px;
		}
								#hjoe:hover > .content, #hjoe.active > .content {
			width: 265px;
			height: 265px;
		}
								#zkft:hover > .content, #zkft.active > .content {
			width: 250px;
			height: 250px;
		}
								#yoga:hover > .content, #yoga.active > .content {
			width: 260px;
			height: 260px;
		}
								#host:hover > .content, #host.active > .content {
			width: 270px;
			height: 270px;
		}
								#poli:hover > .content, #poli.active > .content {
			width: 350px;
			height: 350px;
		}
								#isla:hover > .content, #isla.active > .content {
			width: 245px;
			height: 245px;
		}
								#paul:hover > .content, #paul.active > .content {
			width: 290px;
			height: 290px;
		}
					</style>

</head>

<body>
	<!-- WEMF-TAG VERSION="1.4" -->
  <script language="JavaScript" type="text/javascript"> <!--
	 var WEMF="http://sftv.wemfbox.ch/cgi-bin/ivw/CP/sendungen/";
	 document.write("<img src=\""+WEMF+"?r="+escape(document.referrer)+"&d="+(Math.random()*100000)+"\"width=\"1\" height=\"1\" alt=\"\" class=\"inv\" />");
	 // -->
  </script>
  <noscript>
	 <img src="http://sftv.wemfbox.ch/cgi-bin/ivw/CP/sendungen/" width="1" height="1" alt="" class="inv" />
  </noscript>
<!-- /WEMF-TAG -->

	<!--<p id="debug" style="position: fixed; top: 30px; right: 30px; color: white;"></p>-->
	
	<div id="main" style="height: 10000px;">
	
		<div class="header">
			<h1><a href="http://www.langstrasse.sf.tv/"><span class="label">SF Dok - Langstrasse</span></a></h1>

			<ul class="header-nav">
				<li class="info">
					<a href="?impressum"><span>Infos</span></a>
				</li>
				<li class="mute" style="display: none;">
					<!-- toggles can have two states: '' | 'active' -->
					<span class="toggle" rel="sound">
						<a class="on"><span>Ton ein</span></a>
						<a class="off"><span>Ton aus</span></a>
					</span>
				</li>
				<li class="night">
					<span class="toggle" rel="mode">
						<a class="on"><span>Tag</span></a>
						<a class="off"><span>Nacht</span></a>
					</span>
				</li>
			</ul>

		</div>
		
		
		<div class="navigation">
			<ul>
								<li><a href="#wein">Weinstube</a></li>
								<li><a href="#bier">Restaurant Biergarten</a></li>
								<li><a href="#kita">Kinderkrippe</a></li>
								<li><a href="#fabr">Fabric Frontline</a></li>
								<li><a href="#hohl">Schulhaus</a></li>
								<li><a href="#zapo">Zeughaus Apotheke</a></li>
								<li><a href="#hjoe">Tattoo-Studio</a></li>
								<li><a href="#zkft">Zukunft</a></li>
								<li><a href="#yoga">Yoga-Studio</a></li>
								<li><a href="#host">Backpacker</a></li>
								<li><a href="#poli">Polizei</a></li>
								<li><a href="#isla">Isla Victoria</a></li>
								<li><a href="#paul">St. Pauli Bar</a></li>
							</ul>
		</div>
		
		
		<div class="intro" data-day="0" data-night="0" data-speed="4.5" data-align="center">
			<div class="content">
				<img class="bubble-bg" src="/img/black-bl.png">
				<h2>360° Langstrasse Zürich</h2>
				<p>Eine Webdokumentation, die uns durch das verrückteste Quartier der Schweiz führt. Wir begleiten eine Polizeipatrouille, beobachten das «älteste» Gewerbe und schauen in das Leben von Familien, Unternehmern, bunten Vögeln.</p>
				<span class="hint scroll-down"><span class="label">Scrollen</span></span>
			</div>
		</div>
		
		<div class="street-view"><img src="/img/vid-0001.jpg" alt="Langstrasse Video"></div>
		










				<div id="wein" class="hotspot left" data-day="14" data-night="16" data-speed="2.8">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tl.png">
				<h2>Weinstube</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?wein/360"><span>360°-Bild: Wirtsstube</span></a></li>
										<li><a href="?wein/interview"><span>Thomas Angst</span></a></li>
									</ul>
			</div>
		</div>
				<div id="bier" class="hotspot right" data-day="16.8" data-night="17.2" data-speed="1.8">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Restaurant Biergarten</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?bier/360"><span>360°-Bild: Bermuda-Dreieck am Morgen</span></a></li>
										<li><a href="?bier/interview"><span>Biergarten-Gruppe</span></a></li>
										<li><a href="?bier/samenbunker"><span>Samenbunker</span></a></li>
										<li><a href="?bier/kommenundgehen"><span>Kommen und Gehen</span></a></li>
										<li><a href="?bier/biergarten"><span>Samen-Fredi</span></a></li>
									</ul>
			</div>
		</div>
				<div id="kita" class="hotspot left" data-day="19" data-night="18.5" data-speed="2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tl.png">
				<h2>Kinderkrippe</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?kita/360"><span>360°-Bild: Gruppenraum und Spielplatz</span></a></li>
										<li><a href="?kita/interview"><span>Aneesha Rayani</span></a></li>
										<li><a href="?kita/kinderkrippe"><span>Kinder im Quartier</span></a></li>
									</ul>
			</div>
		</div>
				<div id="fabr" class="hotspot right" data-day="21.15" data-night="21" data-speed="3">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Fabric Frontline</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?fabr/360"><span>360°-Bild: Atelier</span></a></li>
										<li><a href="?fabr/interview"><span>Andi Stutz</span></a></li>
										<li><a href="?fabr/wochenmarkt"><span>Wochenmarkt</span></a></li>
										<li><a href="?fabr/zarenpalast"><span>Zarenpalast</span></a></li>
										<li><a href="?fabr/multikulti"><span>Multikulti</span></a></li>
									</ul>
			</div>
		</div>
				<div id="hohl" class="hotspot left" data-day="25.5" data-night="22.25" data-speed="2.2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tl.png">
				<h2>Schulhaus</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?hohl/360"><span>360°-Bild: Erster Stock</span></a></li>
										<li><a href="?hohl/interview"><span>Dani Furer</span></a></li>
										<li><a href="?hohl/magie"><span>Zaubertrick</span></a></li>
										<li><a href="?hohl/zeitreise"><span>Zeitreise</span></a></li>
										<li><a href="?hohl/weltreise"><span>Weltreise</span></a></li>
										<li><a href="?hohl/uebernachtunsgast"><span>Übernachtungsgast</span></a></li>
										<li><a href="?hohl/schulhaus"><span>Abschied</span></a></li>
									</ul>
			</div>
		</div>
				<div id="zapo" class="hotspot right" data-day="28" data-night="24.25" data-speed="2.5">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Zeughaus Apotheke</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?zapo/360"><span>360°-Bild: Alte Gefässe, Tees und Tinkturen</span></a></li>
										<li><a href="?zapo/interview"><span>Gisela Keller-Von Brunn</span></a></li>
										<li><a href="?zapo/milieu"><span>Milieu-Kundschaft</span></a></li>
										<li><a href="?zapo/hammerjoe"><span>Hammer-Joe</span></a></li>
										<li><a href="?zapo/apotheke"><span>Apéro</span></a></li>
									</ul>
			</div>
		</div>
				<div id="hjoe" class="hotspot right" data-day="37" data-night="33.5" data-speed="2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Tattoo-Studio</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?hjoe/360"><span>360°-Bild: Bei der Arbeit</span></a></li>
										<li><a href="?hjoe/interview"><span>Hammer Joe</span></a></li>
										<li><a href="?hjoe/junkies"><span>Junkies</span></a></li>
									</ul>
			</div>
		</div>
				<div id="zkft" class="hotspot right" data-day="45.2" data-night="45" data-speed="2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Zukunft</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?zkft/360"><span>360°-Bild: Tanzfläche und Bar am Morgen</span></a></li>
										<li><a href="?zkft/zukunft"><span>Musikliebhaber</span></a></li>
									</ul>
			</div>
		</div>
				<div id="yoga" class="hotspot right" data-day="63.5" data-night="66.2" data-speed="2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Yoga-Studio</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?yoga/360"><span>360°-Bild: Yoga-Stunde</span></a></li>
										<li><a href="?yoga/interview"><span>Susan Fischer</span></a></li>
									</ul>
			</div>
		</div>
				<div id="host" class="hotspot right" data-day="78" data-night="73" data-speed="1.2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Backpacker</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?host/360"><span>360°-Bild: Bar und Lounge</span></a></li>
										<li><a href="?host/interview"><span>Lukas Hofstetter</span></a></li>
										<li><a href="?host/backpacker"><span>Die ersten Gäste</span></a></li>
									</ul>
			</div>
		</div>
				<div id="poli" class="hotspot right" data-day="86.3" data-night="81" data-speed="2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>Polizei</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?poli/360"><span>360°-Bild:<br> Foyer Kreiswache 4</span></a></li>
										<li><a href="?poli/interview-sarah"><span>Polizistin Sarah</span></a></li>
										<li><a href="?poli/interview-tobias"><span>Polizist Tobias</span></a></li>
										<li><a href="?poli/polizeiwache"><span>Frau in Not</span></a></li>
										<li><a href="?poli/polizei"><span>Caliente-Festival</span></a></li>
									</ul>
			</div>
		</div>
				<div id="isla" class="hotspot left" data-day="87.5" data-night="87.5" data-speed="2.5">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tl.png">
				<h2>Isla Victoria</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?isla/interview"><span>Lea Bösiger</span></a></li>
										<li><a href="?isla/magie"><span>Über Sex</span></a></li>
									</ul>
			</div>
		</div>
				<div id="paul" class="hotspot right" data-day="91.5" data-night="92.5" data-speed="2">
						<div class="content">
				<img class="bubble-bg" src="/img/red-tr.png">
				<h2>St. Pauli Bar</h2>
				<div class="description">
				</div>
				<ul class="links">
										<li><a href="?paul/360"><span>360°-Bild: Auf dem Dach</span></a></li>
										<li><a href="?paul/irma"><span>Irma La Douce</span></a></li>
										<li><a href="?paul/mietpreise"><span>Die Kosten</span></a></li>
										<li><a href="?paul/mieter"><span>Neue Mieter</span></a></li>
									</ul>
			</div>
		</div>
		




















		<blockquote class="twitter right" data-day="5" data-night="5" data-speed="2" style="right: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«De mest skilda områden i Schweiz (Langstrasse)» ebookingch</p>
				<cite>1H ago via Twitter</cite>
			</div></div>
		</blockquote>
		

		<blockquote class="twitter left" data-day="9" data-night="9" data-speed="1.5" style="left: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«bramshofpark, Horberstand, Letzigrund, Badenerstrasse, Langstrasse, Helvetiaplatz, Kanzlei Areal, Helvetiaplatz, Kanzlei.» So Geplant. Seeniazh</p>
				<cite>2H ago via Twitter</cite>
			</div></div>
		</blockquote>

		<blockquote class="twitter left" data-day="30" data-night="30" data-speed="2.5" style="left: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«bramshofpark, Horberstand, Letzigrund, Badenerstrasse, Langstrasse, Helvetiaplatz, Kanzlei Areal, Helvetiaplatz, Kanzlei.» So Geplant. Seeniazh</p>
				<cite>2H ago via Twitter</cite>
			</div></div>
		</blockquote>

		<blockquote class="twitter left" data-day="38" data-night="38" data-speed="1.5" style="left: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«bramshofpark, Horberstand, Letzigrund, Badenerstrasse, Langstrasse, Helvetiaplatz, Kanzlei Areal, Helvetiaplatz, Kanzlei.» So Geplant. Seeniazh</p>
				<cite>2H ago via Twitter</cite>
			</div></div>
		</blockquote>

		<blockquote class="twitter left" data-day="50" data-night="50" data-speed="1.5" style="left: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«bramshofpark, Horberstand, Letzigrund, Badenerstrasse, Langstrasse, Helvetiaplatz, Kanzlei Areal, Helvetiaplatz, Kanzlei.» So Geplant. Seeniazh</p>
				<cite>2H ago via Twitter</cite>
			</div></div>
		</blockquote>

		<blockquote class="twitter left" data-day="82" data-night="82" data-speed="1.5" style="left: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«bramshofpark, Horberstand, Letzigrund, Badenerstrasse, Langstrasse, Helvetiaplatz, Kanzlei Areal, Helvetiaplatz, Kanzlei.» So Geplant. Seeniazh</p>
				<cite>2H ago via Twitter</cite>
			</div></div>
		</blockquote>

		<blockquote class="twitter left" data-day="96" data-night="96" data-speed="1.5" style="left: 15%">
			<div class="content"><div class="message">
				<img class="bubble-bg" src="/img/black-bl.png">
				<p>«bramshofpark, Horberstand, Letzigrund, Badenerstrasse, Langstrasse, Helvetiaplatz, Kanzlei Areal, Helvetiaplatz, Kanzlei.» So Geplant. Seeniazh</p>
				<cite>2H ago via Twitter</cite>
			</div></div>
		</blockquote>






	</div>
		
		
		
	
	
<audio id="ambi-audio" preload="auto" autobuffer autoplay loop>
	<source src="/img/ambi.mp3" />
	<source src="/img/ambi.ogg" />
</audio>


	
	
	
	
	
	

	
	
	
	
	
	
	

	<script src="/js/ProgressiveImageSequence.class.js"></script>







	

	<script>
		$(document).ready(function(){
			var $doc = $(document);
			var $win = $(window);
			var isTouch = 'ontouchstart' in window;
			
			
			var isChrome = navigator.userAgent.indexOf('Chrome') > 0;


			// dimensions
			var windowHeight, windowWidth;
			var fullHeight, scrollHeight;
			var bgImgWidth = 512, bgImgHeight = 320;
			calculateDimensions();

			// states
			var isNight = false;
			var currentPosition = getScrollTop() / scrollHeight;
			var targetPosition = currentPosition;

			// collect timeline elements
			var $videoImage = $('.street-view > img');
			var $allNavAnchors = $('#main .navigation a');

			var $timeElements = $('[data-day]');
			var timeElements = [];
			var hotspots = {};
		
			$timeElements.each(function(){
				var $view = $(this);
				var id = $view.attr('id');
				var elem = new TimeElement(this);
				
				
				
				timeElements.push( elem );
				
		//	console.log(hotspots);		
				
				if ( id ) hotspots[id] = elem;
				
			//	console.log(timeElements);
				
				var offset = $view.offset();
				$view.css({position: 'fixed' , top: offset.top });
			});


			// handle anchor links
			$('a[href^="#"]').click(function(event){
				event.preventDefault();
				var target = $(this).attr('href').substr(1);
				
			//	console.log(target);
				
				var hotspot = hotspots[target];
				if ( hotspot ) {
					var pos = hotspot.getPosition();
					setScrollTop( pos * scrollHeight );
				}
			});

			function setScrollTop(value) {
				$win.scrollTop(value);
			}
			
			function getScrollTop() {
				return $win.scrollTop() || (document.documentElement && document.documentElement.scrollTop);
			}
			
			function calculateDimensions() {
				windowWidth = $win.width();
				windowHeight = $win.height();
				fullHeight = $('#main').height();
				scrollHeight = fullHeight - windowHeight;
			}
			function setTargetPosition( position , immediate ) {
				targetPosition = position;
				if ( immediate ) currentPosition = targetPosition;
			}
			function handleResize() {
				calculateDimensions();
				renderBackgroundImage();
				renderTimeline( currentPosition );
				renderNavigation();
				handleScroll();
			}
			function handleScroll() {
				setTargetPosition( getScrollTop() / scrollHeight );
				activateElement( $('.navigation') , targetPosition < 0.001 );
			}




			// rendering

			var scrollActivateTimeout;

			function renderTimeline( position ) {
				var minY = -500, maxY = windowHeight + 500;
				// element position
				$.each(timeElements,function(index,element){
					var elemPosition = element.getPosition();
					var elemY = windowHeight/2 + element.speed * (elemPosition-position) * scrollHeight;
					var active = false;
					if ( elemY < minY || elemY > maxY ) {
						element.view.css({'visiblity':'none', top: '-1000px','webkitTransform':'none'});
					} else {
						element.view.css('visiblity','visible');
						positionElement(element.view,null,elemY);
						if ( elemY < windowHeight/2 ) {
							var x = (windowHeight/2 - elemY)/100;
							x = x*x * 20;
							if ( element.view.hasClass('hotspot') ) {
								if ( element.view.hasClass('right') ) {
									element.view.css('margin-right',-x);
								} else
								if ( element.view.hasClass('left') ) {
									element.view.css('margin-left',-x);
								}
							}
						} else
						if ( element.view.hasClass('hotspot') ) {
							element.view.css({'margin-left':0,'margin-right':0});
						}

						if ( element.view.is('.twitter') ) {
							var sinMargin = Math.sin(elemY/300)*100;
							element.view.css({'margin-left':sinMargin,'margin-right':sinMargin});
						}
						active = Math.abs(windowHeight/2 - elemY) < Math.max(windowHeight/5,100);
					}
					if ( getElementActive(element.view) != active ) {
						clearTimeout( element.scrollActivateTimeout );
						setElementActive(element.view,active);
						function doit() {
							activateElement( element.view , active );
						}
						if ( active ) {
							if (active) playSound(element.view.attr('id'));
							element.scrollActivateTimeout = setTimeout( doit , 1000 );
						} else {
							doit();
						}
						activateElement( element.anchor , active );
					}
				});

				// video
				showImage( currentPosition );
			}

			function renderNavigation() {
				var MINGAP = 30;
				var $navigation = $('#main > .navigation');
				var scrollThumbHeight = Math.max( 30 , (windowHeight/fullHeight)*windowHeight );
				var availableHeight = windowHeight - scrollThumbHeight;
				var all = [];
				// put all hotspots in array and sort by position
				$.each(hotspots,function(k,v){ all.push(v); });
				all.sort(function(a,b){return a.getPosition()-b.getPosition();});
				var y = 0;
				$.each(all,function(index,element){
					if ( !element.anchor ) return;
					var $anchor = $(element.anchor);
					var pos = element.getPosition();
					y = Math.max( y + MINGAP , pos * availableHeight + scrollThumbHeight/2 );
					$anchor.css('top',y);
				});
			}

			function positionElement( elem , x , y ) {
				if ( Modernizr.csstransforms ) {
					var xpos = ( x === null ? $.data(elem,'x') : x ) || 0;
					var ypos = ( y === null ? $.data(elem,'y') : y ) || 0;
					$.data(elem,'x',xpos);
					$.data(elem,'y',ypos);
				}
				
				if ( $.browser.safari && !isTouch && !isChrome ) {
					elem.css({top:-1000,webkitTransform:'translate3d('+(xpos)+'px,'+(ypos+1000)+'px,0px)'});
				} else 
				if ( Modernizr.csstransforms ) {
					var transform = 'translate('+(xpos)+'px,'+(ypos+1000)+'px)';
					elem.css({
						'-webkit-transform':transform,
						'-moz-transform':transform,
						'-o-transform':transform,
						'-ms-transform':transform
					});
				} else
				{
					if ( x !== null ) {
						elem.css('left',x);
					}
					if ( y !== null ) {
						elem.css('top',y);
					}
				}
			}
			function activateElement( elem , active ) {
				$.data( elem , 'active' , active );
				active ? elem.addClass('active') : elem.removeClass('active');
			}
			function setElementActive( elem , active ) {
				$.data( elem , 'active' , active );
			}
			function getElementActive( elem ) {
				return $.data( elem , 'active' );
			}

			function renderBackgroundImage(){
				// get image container size				
				var scale = Math.max( windowHeight/bgImgHeight , windowWidth/bgImgWidth );
				var width = scale * bgImgWidth , height = scale * bgImgHeight;
				var left = (windowWidth-width)/2, top = (windowHeight-height)/2;
				if ( ($.browser.safari || isTouch) && !isChrome ) {
					var transform = 'translate3d('+[-bgImgWidth/2,-bgImgHeight/2,0].join('px,')+'px) scale3d('+scale+','+scale+',1) translate3d('+[windowWidth/2/scale,windowHeight/2/scale,0].join('px,')+')';
					$videoImage
						.width(bgImgWidth).height(bgImgHeight)
						.css('-webkit-transform',transform)
						  .css({'position':'fixed', top: 0, left: 0});
				} else
				if ( Modernizr.csstransforms ) {
				/*	console.log('Using 2D transforms');*/
					var transform = 'translate('+[-bgImgWidth/2,-bgImgHeight/2].join('px,')+'px) scale('+scale+') translate('+[windowWidth/2/scale,windowHeight/2/scale].join('px,')+'px)';
					$videoImage
						.width(bgImgWidth).height(bgImgHeight)
						.css({
							'-webkit-transform':transform,
							'-moz-transform':transform,
							'-o-transform':transform,
							'-ms-transform':transform
						})
						  .css({'position':'fixed', top: 0, left: 0});
				} else {
					$videoImage
						  .width(width).height(height)
						  .css('position','fixed')
						  .css('left',left+'px')
						  .css('top',top+'px');
				}
			}


			// main render loop
			window.requestAnimFrame = (function(){
			  return  window.requestAnimationFrame       ||
			          window.webkitRequestAnimationFrame ||
			          window.mozRequestAnimationFrame    ||
			          window.oRequestAnimationFrame      ||
			          window.msRequestAnimationFrame     ||
			          function(/* function */ callback, /* DOMElement */ element){
			            window.setTimeout(callback, 1000 / 60);
			          };
			})();


			function animloop(){
			  requestAnimFrame(animloop);
				if ( Math.floor(currentPosition*5000) != Math.floor(targetPosition*5000) ) {
					var deaccelerate = Math.max( Math.min( Math.abs(targetPosition-currentPosition)*5000 , 10 ) , 2 );
					currentPosition += (targetPosition - currentPosition) / deaccelerate;
					renderTimeline(currentPosition);
				}
			}
			animloop();




			// video handling

			var daySeqLoader = new ProgressiveImageSequence( "http://www.360langstrasse.sf.tv/media/street/day/xs/vid-{index}.jpg" , 1050 , {
				indexSize: 4,
				onProgress: handleLoadProgress,
				onComplete: handleLoadComplete,
				stopAt: isSlowBrowser() ? (isTouch?4:8) : 1
			} );
			
			console.log(daySeqLoader);
			
			var imageSeqLoader = daySeqLoader;

			var loadCounterForIE = 0; // there seems to be a problem with ie calling the callback several times
			imageSeqLoader.loadPosition(currentPosition,function(){
				loadCounterForIE++;
				if ( loadCounterForIE == 1 ) {
					showImage(currentPosition);
					imageSeqLoader.load();
					imageSeqLoader.load();
					imageSeqLoader.load();
					imageSeqLoader.load();
				}
			});

			var nightSeqLoader = new ProgressiveImageSequence( "http://www.360langstrasse.sf.tv/media/street/day/xs/vid-{index}.jpg" , 630 , {
				indexSize: 3,
				onProgress: handleLoadProgress,
				onComplete: handleLoadComplete,
				stopAt: isSlowBrowser() ? 4 : 1
			} );



			var currentSrc, currentIndex;
			var highresTimeout;

			function showImage(position) {
				var index = Math.round( currentPosition * (imageSeqLoader.length-1) );
				var img = imageSeqLoader.getNearest( index );
				var nearestIndex = imageSeqLoader.nearestIndex;
				if ( nearestIndex < 0 ) nearestIndex = 0;
				var $img = $(img);
				var src;
				if ( !!img ) {
					src = img.src;
					if ( src != currentSrc ) {
						$videoImage[0].src = src;
						currentSrc = src;
					}
				}
				clearTimeout(highresTimeout);
				highresTimeout = setTimeout(function(){
					if ( !!src ) {
						$('#debug').text( nearestIndex + ' / ' + index + ' / ' + (Math.round( index / imageSeqLoader.length * 10000 ) / 100) );
						var highSrc = src.split('/xs/').join('/l/');
						loadHighres(highSrc);
					}
				},isSlowBrowser()?500:150);
			}

			window.switchStreetMode = function() {
				switchToMode( isNight ? 'day' : 'night' );
			};

			window.switchToMode = function( mode ) {
				$videoImage.fadeOut(function(){
					var prevHotspot, nextHotspot;
					var all = [];
					// put all hotspots in array and sort by position
					$.each(hotspots,function(k,v){ all.push(v); });
					all.sort(function(a,b){return a.getPosition()-b.getPosition();});
					$.each(all,function(k,v){
						if ( v.getPosition() > currentPosition ) {
							nextHotspot = v;
							prevHotspot = all[k-1];
							return false;
						}
					});
					if ( nextHotspot == null ) {
						prevHotspot = all[all.length-1];
					}
					var prevPos = prevHotspot ? prevHotspot.getPosition() : 0;
					var nextPos = nextHotspot ? nextHotspot.getPosition() : 1;
					var intermediatePosition = (currentPosition-prevPos) / (nextPos-prevPos);

					// let's make the switch
					isNight = mode == 'night';
					$('.toggle[rel="mode"]')[ isNight ? 'addClass' : 'removeClass' ]('active');

					prevPos = prevHotspot ? prevHotspot.getPosition() : 0;
					nextPos = nextHotspot ? nextHotspot.getPosition() : 1;
					targetPosition = currentPosition = intermediatePosition * (nextPos-prevPos) + prevPos;

					imageSeqLoader.stop(); imageSeqLoader.reset();
					imageSeqLoader = isNight ? nightSeqLoader : daySeqLoader;
					var loadCounterForIE = 0; // there seems to be a problem with ie calling the callback several times
					imageSeqLoader.loadPosition( currentPosition , function() {
						loadCounterForIE++;
						if ( loadCounterForIE == 1 ) {
							setTimeout(function(){
								imageSeqLoader.load();
								imageSeqLoader.load();
								imageSeqLoader.load();
								imageSeqLoader.load();
							},10);
							$(window).scrollTop(targetPosition*scrollHeight);
							renderNavigation();
							renderTimeline( currentPosition );
							showImage( currentPosition );
							$videoImage.fadeIn();
						}
					});
				});
			};


			var loadHighresCounter = 0;

			function loadHighres(src) {
				var videoImage = $videoImage[0];
				videoImage.src = src;
			}


			$('body').append('<div id="loading-bar" style="position:fixed; bottom:0; left:0; background-color: #DF0012; background-color: rgba(223,0,18,0.5); height: 1px;"></div>');
			function handleLoadProgress() {
				var progress = imageSeqLoader.getLoadProgress() * 100;
				$('#loading-bar').css({width:progress+'%',opacity:1});
			}

			function handleLoadComplete() {
				$('#loading-bar').css({width:'100%',opacity:0});
			}




			$win.resize( handleResize );
			$win.scroll( handleScroll );

			handleResize();




			// helper classes


			$('.sound .toggle').click(function(event){
				event.preventDefault();
				var $toggle = $(this);
				var isActive = $toggle.hasClass('active');
				if ( isActive ) {
					$toggle.removeClass('active');
				} else {
					$toggle.addClass('active');
				}

			});

			$('.night a').click(function(event){
				event.preventDefault();
				switchStreetMode();
			});

			function TimeElement( view , options ) {
				options = options || {};
				var $view = $(view);
				this.id = $view.attr('id');
				this.view = $view;
				this.anchor = $allNavAnchors.filter('[href="#'+$view.attr('id')+'"]');
				this.anchor = this.anchor.closest('li');
				this.getPosition = function() { return isNight? this.nightPosition : this.dayPosition; };
				this.dayPosition = options.dayPosition || Number( $view.attr('data-day')/100 );
				this.nightPosition = options.nightPosition || Number( $view.attr('data-night')/100 );
				this.speed = options.speed || Number( $view.attr('data-speed') ) || 1;
				this.align = options.align || $view.attr('data-align') || 'left';
			}


			function easeCos(t) {
				return Math.cos( (x*Math.PI+Math.PI)+1 ) / 2;
			}


			function isSlowBrowser() {
				return isTouch || ($.browser.msie && Number($.browser.version) <= 8) ? true : false;
			}












			// twitter magic

	/*		var $twitter = $('.twitter');
			$twitter.hide();
			twittersearch('langstrasse',$twitter.length,function(result){
				$.each(result,function(index,value){
					var $tweet = $( $twitter[index] );
					$tweet.fadeIn();
					$tweet.find('p').html( value.message + ' – ' + value.user );
					$tweet.find('cite').text( value.since );
				});
			});

*/



			// sound control
/*
			var soundMuted = false;
			(function(){
				var ambi = document.getElementById('ambi-audio');
				if ( ambi && ambi.play ) {
					$('.mute').show();
					$('.mute > .toggle').click(function(){
						soundMuted = ambi.muted = !ambi.muted;
						$(this)[ ambi.muted ? 'addClass' : 'removeClass' ]('active');
						$(this).parent()[ ambi.muted ? 'addClass' : 'removeClass' ]('active');
					});
				}
			})();

			function playSound( name ) {
				var snd = document.getElementById(name+'-audio');
				if ( !soundMuted && snd && snd.play && Math.random() < 0.3 ) {
					if ( snd.currentTime == 0 || snd.ended ) {
						snd.volume = 0.4;
						snd.currentTime = 0;
						snd.play();
					}
				}
			}
			
			function addSounds( sounds ) {
				var $body = $('body');
				$.each( sounds , function(i,name) {
					var $audio = $('<audio id="'+name+'-audio" preload="auto" autobuffer><source src="/img/'+name+'.mp3"><source src="/img/'+name+'.ogg"></audio>').hide();
					$body.append( $audio );
				});
			}
			
			setTimeout(function(){
				addSounds(['host','zkft','kita','hohl','zapo']);
			},1000);


*/


			// touch override

			if ( isTouch ) {

				(function(){

					$('#main').css('height',1);

					var scrollPos = 0;
					var MAXSCROLL = 10000;

					var oldCalculateDimensions = calculateDimensions;
					calculateDimensions = function() {
						oldCalculateDimensions();
						scrollHeight = MAXSCROLL - windowHeight;
					};

					var oldGetScrollTop = getScrollTop;
					getScrollTop = function() {
						return scrollPos;
					};

					var oldSetScrollTop = setScrollTop;
					setScrollTop = function(value) {
						scrollPos = value;
						dispatchScroll();
					};

					function dispatchScroll() {
						targetPosition = scrollPos / scrollHeight;
					}

					var d = document;
					var touchMoved, touchDown, touchBeginPosition, isLinkTouch;

					function onTouchStart(event) {
						var isNavigation = $(event.target).filter('a');
						if ( isNavigation.length ) {
							isNavigation = isNavigation.parents('.navigation').length >= 1;
							return;
						}
						if ( $(event.target).parents('a').length == 0 ) {
							event.preventDefault();
						}
						touchDown = true;
						var touch = event.touches[0];
						touchX = touch.clientX;
						touchY = touch.clientY;
						touchBeginPosition = { x: touchX , y: touchY , scroll: scrollPos };
						d.addEventListener('touchmove', onTouchMove, false);
						d.addEventListener('touchend', onTouchEnd, false);
					}
					function onTouchMove(event) {
					    event.preventDefault();
						var touch = event.touches[0];
						touchX = touch.clientX;
						touchY = touch.clientY;
						var dy = (touchY-touchBeginPosition.y);
						if ( Math.abs(dy) > 3 ) {
					    touchMoved = true;
						}
						scrollPos = touchBeginPosition.scroll - dy * 2;
						scrollPos = Math.min( MAXSCROLL , Math.max( 0 , scrollPos ) );
						dispatchScroll();
					}
					function onTouchEnd(event) {
						if ( touchMoved ) {
							event.preventDefault();
						}

						d.removeEventListener('touchmove', onTouchMove, false);
						d.removeEventListener('touchend', onTouchEnd, false);
						touchDown = false;
					}
					
					d.addEventListener('touchstart', onTouchStart, false);
//					d.getElementsByClassName('street-view')[0].addEventListener('touchstart', onTouchStart, false);
				})();

			}

		});

	</script>








	


	<!-- START OF SmartSource Data Collector TAG -->
<!-- Copyright (c) 1996-2009 WebTrends Inc.  All rights reserved. -->
<!-- Version: 8.6.2 -->
<!-- Tag Builder Version: 3.0  -->
<!-- Created: 7/8/2009 1:07:31 PM -->
<script src="/js/webtrends.js" type="text/javascript"></script>
<!-- -->
<!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
<!-- JavaScript include file can cause serious problems with cross-domain tracking.      -->
<!-- -->
<script type="text/javascript">
//<![CDATA[
var _tag=new WebTrends();
_tag.dcsGetId();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
// Add custom parameters here.
//_tag.DCSext.param_name=param_value;
_tag.dcsCollect();
//]]>
</script>
<noscript>
<div><img alt="DCSIMG" id="DCSIMG" width="1" height="1" src="http://statse.webtrendslive.com/dcsg3teij000008adj6gryzsf_4b6y/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=8.6.2"/></div>
</noscript>
<!-- END OF SmartSource Data Collector TAG -->

</body>
</html>
